<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8"></mate>
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <!-- ææ°çæ¬ç Bootstrap æ ¸å¿ CSS æä»¶ -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- å¯éç Bootstrap ä¸»é¢æä»¶ï¼ä¸è¬ä¸ç¨å¼å¥ï¼ -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- ææ°ç Bootstrap æ ¸å¿ JavaScript æä»¶ -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style type="text/css">
        .body{
            text-align:center;
            vertical-align:middle;
        }
        .div-main{
            width: 300px;
            height: 296px;
            margin-top: 17%;
            margin-left: 40%;
        }
        .login-span{
            width: 300px;
            height: 100px;
            margin-bottom: 20px;
            background-image: url(img/login.jpg);
        }
        .login-text{
            width: 100%;
            height: 50px;
        }
        #clear{
            clear: both;
        }
        .div-login{
            margin-top: 12px;
            margin-left: auto;
        }
        .input-margin{
            margin-top: 17px;
        }
        .error-span{
            height: 20px;
            widows: 100%;
            font-size: 14px;
            color: red;
            vertical-align: middle;
            margin-top: 10px;
        }
        .btn-login{
            margin-top: 20px;
            width: 100%;
            height: 50px;
            text-align: center;
            vertical-align: middle;
            background:#00d762;
            color: whitesmoke;
            border: 1px solid whitesmoke;
            font-family: monospace;
        }
        .file-a{
            display: block;
            text-align: left;
            vertical-align: middle;
            color: grey;
            border: 1px solid grey;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
        }
        .image-file{
            opacity: 0;
            position: relative;
            left: 0;
            top: -50px;
        }
    </style>
</head>
<body class="body">
<div class="div-main">
    <div class="login-span">
    </div>
    <form action="regist" method="post" enctype="multipart/form-data">
        <input type="text" name="name" class="input-margin login-text" placeholder="Username">
        <input type="password" name="password" class=" input-margin login-text" placeholder="Password">
        <div>
            <span id="hidden-file" class="file-a input-margin">
                <span id="avatar_name">avatar</span>
                <input id="ff" name="avatarPic" type="file" class="image-file" >
            </span>
        </div>
        
        <input type="submit" class="btn-login"/>
    </form>
</div>
<script type="text/javascript">
    $(function(){
        function getFileName(o){
            var pos=o.lastIndexOf("\\");
            return o.substring(pos+1);
        }
        $("#ff").on("change",function(){
            console.log($(this).val());
            $("#avatar_name").text(getFileName($(this).val()));
        });
    });
</script>
</body>
</html>